<template>
	<!-- 导航栏 -->
	<view class="fixed-top" :style="navBarStyle">
		<!-- 状态栏 -->
		<view :style="'height:'+statusBarHeight+'px'"></view>
		<!-- 导航栏 -->
		<view class="w-100 flex-a-j flex-row justify-between " style="height: 90upx;">
			
			<view class="flex">
				<!-- 返回 -->
				<free-icon-button @click="back">
					<text class="iconfont font-md text-center" :style="buttonStyle">&#xe60d;</text>
				</free-icon-button>
				
				<!-- 左边 -->
				<view class=" flex-a-j ml-3">
					<text class="font-md" :style="buttonStyle">朋友圈</text>
				</view>
			</view>
			
			<!-- 右边 -->
			<view class="flex-a-j flex-row ">
				
				<free-icon-button @click="$emit('click')"><text :style="buttonStyle" class="iconfont text-white">&#xe6fd;</text></free-icon-button>
				
			</view>
		</view>
	</view>
</template>

<script>
	import freeIconButton from "@/components/free-ui/free-icon-button.vue"
	
	export default{
		components:{
			freeIconButton
		},
		props:{
			
			scrollTop:{
				default:0,
				type:Number
			},
			
		},
		data() {
			return {
				
			statusBarHeight:0,
				
			}
		},
		mounted() {
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight()
			// #endif
			
		},
		computed:{
			//计算透明度变化
			changeNumber(){
				let start  = uni.upx2px(500)
				let end  = uni.upx2px(620)
				let H = end-start
				let num = 0
				if(this.scrollTop>start){
					num = (this.scrollTop-start)/H
					
				}
				return num>1?1:num
			},
			navBarStyle(){
				
				return `background-color: rgba(255,255,255,${this.changeNumber});`
			},
			buttonStyle(){
				if(this.changeNumber>0){
					return `color: rgba(0,0,0,${this.changeNumber});`
				}
				return 'color:#FFFFFF'
			}
			
			
		},
		methods:{
			
			
			clickEvent(event){
				
			},
			back(){
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style>
</style>
